<template>
  <div class="num-con">
    <!--数据条目外容器-->
    <div class="data-item-pot" v-for="item of dataList">
      <!--数据名容器-->
      <div class="data-name-box">
        <span>{{ item.label }}</span>
      </div>
      <!--数据值容器-->
      <div class="data-value-box">
        <span>
          {{ item.value }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>

import {subPageMixin} from "@/views/checkBusPage/mixins/subPageMixins";
import {NUMBER_CONFIG} from "@/views/checkBusPage/components/numCon/config";
import {questionStatistic} from "@/api/checkPage/quertion";

export default {
  props: {
    danInfoData: {
      type: Object
    }
  },
  mixins: [subPageMixin],
  data: function () {
    return {
      //数据列表数组
      dataList: [
        {dataName: '督查企业数量', dataValue: 4},
        {dataName: '总隐患数', dataValue: 4},
        {dataName: '整改完成隐患数量', dataValue: 3},
        {dataName: '整改中隐患数量', dataValue: 1},
        {dataName: '未整改隐患数量', dataValue: 0}
      ]
    }
  },
  methods: {
    getDataList(param = {}) {
      let {handelCode, inspectInfo, danInfoData} = this
      if (danInfoData != null) {
        handelCode = `${handelCode}-info`
      } else {
        param = {inspectId: inspectInfo.id}
      }
      let currentConfig = NUMBER_CONFIG[handelCode]
      if (!currentConfig) return;

      let {queryUrl, dataList} = currentConfig;
      let owner = this
      if (danInfoData != null) {
        owner.dataList = _.cloneDeep(dataList).map(item => {
          item.value = danInfoData[item.value]
          return item
        })
      } else {
        questionStatistic(queryUrl, param).then(res => {
          owner.dataList = _.cloneDeep(dataList).map(item => {
            item.value = res.data[item.value]
            return item
          })
        })
      }
    }
  },
  created() {
    this.getDataList()
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.num-con {
  width: 100%;
  height: 100%;
  //background: deeppink;
  //设置内部无素位置
  display: flex;
  align-items: center;
  // 设置数据条目外容器样式
  .data-item-pot {
    //不设宽度由内容撑开
    height: 100%;
    margin-left: 64px; //设置条目间间距

    &:first-child{
      margin-left: 32px; //设置条目间间距
    }

    //background: yellow;  //仅用于布局查看
    //设置数据名容器样式
    .data-name-box {
      //不设宽高由内容撑开
      margin-top: 20px; //设置与上边间距
      margin-bottom: 30px; //设置与下边数字间距、
      //设置字体样式
      font-size: $second-font-size;
      color: rgba(144, 147, 153, 1);
    }

    //设置数据值容器样式
    .data-value-box {
      //不设宽高由内容撑开或继承父元素宽度
      //设置字体样式
      font-size: $title-size;
      text-align: center;
    }
  }
}
</style>
